<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

    <link rel="stylesheet" type="text/css" href="../cssjs/css/bootstrap-icons.css" />
    <link rel="stylesheet" type="text/css" href="../cssjs/css/bootstrap.css" />

    <link rel="stylesheet" href="../swiper8/swiper-bundle.min.css">
    <script src="../swiper8/swiper-bundle.min.js"></script>
    <script src="../cssjs/js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
    <title>醉品茶城首页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div img,
        span {
            display: block;
        }

        .container .top-left img {
            width: 35px;
            height: 35px;
        }

        .row1 div {
            display: flex;
            align-items: center;
        }

        .row1 {
            height: 99px;
            display: flex;
            justify-content: space-between;
        }

        .row2 {
            height: 22px;
        }

        .box-r img {
            width: 32px;
            height: 32px;
        }

        .box-r span {
            font-size: 12px;
        }

        .box-r-r img {
            width: 60px;
            height: 60px;
        }

        .box-r-r p {
            font-size: 12px;
        }

        #monitor {
            left: 50px;
            position: fixed;
            top: 220px;
            width: 50px;

        }

        #monitor a {
            border: 1px solid #b0b0b0;
            width: 45px;
            height: 45px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: gray;
            text-decoration: none;
        }

        #monitor a.active {
            background-color: red;
            color: white;
        }



        #drink-center div .col:hover {
            box-shadow: 0 5px 5px 5px #e0e0e0;
        }

        #drink-center .row div {
            margin-bottom: 30px;
        }

        #drink-center .row .col a {
            margin: 8px 8px 8px 8px;
            text-decoration: none;
            background-color: #fff;
        }

        #drink-center .row .col {
            display: flex;
            justify-content: center;
        }

        #drink-center .row .col a div img {
            width: 160px;
            height: 160px;
        }

        #drink-center .row .col a span {
            margin-top: 8px;
            color: black;
            font-size: 16px;
            overflow: hidden;
            width: 160px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #drink-center .row .col a h5 {
            font-size: 16px;
            color: #c00000;
        }

        .left-drinkbox {
            /* width: 100%; */
            height: 70%;
        }

        .left-drinkbox:hover {
            box-shadow: 0 5px 5px 5px #b0b0b0;
        }

        .left-drink-downbox {
            /* width: 80%; */
            height: 26%;
            margin-top: 20px;
        }

        .left-drink-downbox a {
            text-decoration: none;
        }

        .left-drink-downbox h2,
        p {
            color: black;
        }

        .left-drink-downbox p {
            font-size: 6px;
            color: #b0b0b0;
        }

        .left-drink-downbox:hover {
            box-shadow: 3px 5px 5px 5px #b0b0b0;
        }

        .drink-right-text span {
            width: 120px;
            /* height: 45px;  */
            /* 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/

            /* 设置高度是行高的倍数，防止文本露出一半 */
            line-height: 15px;
            /* 旧版弹性盒 */
            display: -webkit-box;
            /* 弹性盒子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 控制要显示的行数 */
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

        .down-text-box li {
            list-style: none;
            margin-top: 10px;
        }

        .down-text-box a {
            text-decoration: none;
            color: #b0b0b0;
            font-size: 14px;
        }

        .down-text-box a:hover {
            color: red;
        }

        .down-img-box {
            margin-top: 15px;
        }

        .down-img-box img {
            width: 110px;
            height: 110px;
            margin-top: 20px;
        }

        .swiper-slide img {
            width: 220px;
            margin-bottom: 15px;
        }

        .swiper-slide a {
            text-decoration: none;
        }

        .swiper-slide span {
            color: #b0b0b0;
            font-size: 12px;
        }

        .swiper-slide s {
            color: #b0b0b0;
        }

        .swiper-slide h5 {
            width: 220px;
            color: #333333;
            /* height: 45px;  */
            /* 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/

            /* 设置高度是行高的倍数，防止文本露出一半 */
            /* line-height: 15px; */
            /* 旧版弹性盒 */
            display: -webkit-box;
            /* 弹性盒子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 控制要显示的行数 */
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        #box>div {
            padding: 10px;
            border-radius: 10px;
            background-color: gray;
            margin-bottom: 10px;
            width: 300px;
        }

        #topmonitor {
            user-select: none;
            position: fixed;
            top: 0;
            width: 100%;
            background-color: #ffffff;
            border: 1px solid #e0e0e0;
            box-shadow: 5px;
        }

        #topmonitor>div {
            width: 1226px;
            padding: 0, 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #topmonitor a {
            text-decoration: none;
            display: block;
            /* border: 1px solid black; */
        }

        #topmonitor>div a {
            color: #000000;
            font-size: 14px;
        }

        #topmonitor>div>div {
            width: 50%;
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <!-- 顶部滑动 -->
    <div class="container">
        <div id="topmonitor" style="display: none;z-index: 999;">
            <div>
                <a href=""><img src="../img/s_logo.png" alt=""></a>

                <div>
                    <a href="" style="color: #ff3700;">首页</a>
                    <a href="">品牌集成馆</a>
                    <a href="">大师名匠馆</a>
                    <a href="">积分商城</a>
                    <a href="">大客户专区</a>
                </div>

                <a href="" style="float:right;width: 100px; background-color: red;color: #ffffff;">
                    <img src="../img/购物车.png" alt="" style="width: 20px;">
                    <p style="display: block;">购物车</p>
                </a>

            </div>
        </div>
    </div>
    <!-- 顶部导航 -->
    <div class="xz-admin-navbar navbar navbar-expand-md navbar-dark bg-dark">
        <div class="container">
            <!-- logo -->
            <a href="#" class="top-left">
                <img src="../img/top-logo.png" alt="" />
            </a>
            <a href="#" class="navbar-brand">
                醉品茶城
            </a>
            <a class="nav-link active" href="#" style="color: #fff; font-size: 1.25rem">醉品茶城手机版</a>
            <!-- 小菜单按钮 -->
            <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#bigMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 菜单区域 -->
            <div class="collapse navbar-collapse" id="bigMenu">
                <ul class="navbar-nav" style="display: flex; justify-content: flex-end; width: 100%">
                    <!-- <li class="nav-item">
              <a class="nav-link active" href="#">醉品茶城手机版</a>
            </li> -->
                    <li class="nav-item">
                        <a class="nav-link" href="./login.html">登录</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">我的订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">帮助中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于醉品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">4006-066-068</a>
                    </li>
                    <li class="nav-item" style="background-color: red">
                        <a class="nav-link" href="#" style="color: #fff">购物车</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 搜索栏 -->
    <div class="container-fuild" style="background-image: url(../img/bg-img/01_top.jpg);">
        <div class="container">
            <div class="row1">
                <div class="col col-xl-2 d-none d-xl-block ">
                    <div style="margin-top: 10px;height: 76px">
                        <a href="" style="position: absolute; width: 190px; height: 76px;">
                            <img src="../img/big-logo.png" alt="" style="width: 190px; height: 76px" />
                        </a>
                    </div>
                </div>
                <!-- 搜索框 -->
                <div class="col col-xl-6 col-sm-12">
                    <div style="display: flex; justify-content: center;height: 38px; ">
                        <input type="text" style="width: 433px; height: 38px; border: 1px solid #e0e0e0" />
                        <div
                            style="width: 38px; height: 38px;background-image: url(../img/搜索.png); border: 1px solid #e0e0e0;">
                        </div>
                    </div>

                </div>

                <div class="col col-xl-4 d-none d-xl-block">
                    <div style="display: flex;justify-content: space-between;margin-top: 20px;">
                        <div class="box-r">
                            <img src="../img/img-small/04_90day.png" alt="" />
                            <span>全场商品90天保价</span>
                        </div>

                        <div class="box-r">
                            <img src="../img/img-small/06.png" alt="" />
                            <span>满59元免邮费</span>
                        </div>
                        <div class="box-r">
                            <img src="../img/img-small/07钱包.png" alt="" />
                            <span>2000城市货到付款</span>
                        </div>
                        <div class="box-r-r">
                            <img src="../img/img-small/phone_qr.png" alt="" />
                            <p>手机登录购买</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row2" style="width: 100%; height: 60px; background-color: yellow;">
                <div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    </div>

    <!-- 页面上部 -->
    <div class="container-fuild" style="background-image: url(../img/bg-img/zuipin-left.jpg);">
        <div class="container">
            <div class="row">
                <!-- 分级目录 -->
                <div class="col col-xl-3 d-none d-xl-block">
                    <div>分级目录</div>
                </div>
                <!-- 轮播图1 -->
                <div class="col col-xl-9 col-sm-12">
                    <div>
                        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                            <div class="carousel-indicators">
                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                                    class="active"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators"
                                    data-bs-slide-to="1"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators"
                                    data-bs-slide-to="2"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators"
                                    data-bs-slide-to="3"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators"
                                    data-bs-slide-to="4"></button>
                                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
                                    class="active"></button>
                            </div>
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img src="../img/rotation_map1/01pc春茶轮播.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="../img/rotation_map1/02xinyuebig.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="../img/rotation_map1/03renchi.jpg" class="d-block w-100" alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="../img/rotation_map1/04_20210521PC轮播12073-1.jpg" class="d-block w-100"
                                        alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="../img/rotation_map1/05_20210521PC轮播68061-1.jpg" class="d-block w-100"
                                        alt="...">
                                </div>
                                <div class="carousel-item">
                                    <img src="../img/rotation_map1/06_叶界送礼-PC轮播.jpg" class="d-block w-100" alt="...">
                                </div>
                            </div>
                            <button class="carousel-control-prev" type="button"
                                data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button"
                                data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                                <span class="carousel-control-next-icon"></span>
                                <span class="visually-hidden">Next</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fuild">
            <div class="container" style="background-image: url(../img/bg-img/02_down.jpg); padding: 15px 0 35px 0;">
                <div class="row">
                    <div class="col col-xl-3 d-none d-xl-block">
                        <a href="">
                            <img src="../img/1.jpg" alt="">
                        </a>
                    </div>
                    <div class="col col-xl-3 d-none d-xl-block">
                        <a href="">
                            <img src="../img/2.jpg" alt="">
                        </a>
                    </div>
                    <div class="col col-xl-3 d-none d-xl-block">
                        <a href="">
                            <img src="../img/3.jpg" alt="">
                        </a>
                    </div>
                    <div class="col col-xl-3 d-none d-xl-block">
                        <a href="">
                            <img src="../img/4.jpg" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面中间 -->
    <div class="container-fuild" style="background-color: #f5f5f5;">
        <!-- 左侧导航栏 -->
        <div id="monitor" class="" style="display: none;">
            <a class="active" href="#special">
                特价
            </a>
            <a href="#drink">
                自饮
            </a>
            <a href="#gift">
                送礼
            </a>
            <a href="#tea">
                茶具
            </a>
            <a href="#hot">
                热评
            </a>
        </div>

        <div class="container">
            <!-- 特价 -->
            <div class="row" id="special">
                <!-- 左侧 -->
                <div class="col col-xl-6">
                    <div>
                        <h2>限时特价</h2>
                    </div>
                    <div class="row">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                            </div>


                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>


                        </div>
                    </div>
                </div>
                <!-- <script language="javascript">
                    var mySwiper = new Swiper('.swiper', {

                        loop: true, // 循环模式选项



                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },



                        effect: 'coverflow',
                        slidesPerView: 2,
                        centeredSlides: true,



                        autoplay: {
                            delay: 1000,//1秒切换一次
                            pauseOnMouseEnter: true,
                            disableOnInteraction: false,
                        },

                    })
                </script> -->

                <!-- 右侧 -->
                <div class="col col-xl-6">
                    <div>
                        <h2>限时秒杀</h2>
                    </div>
                    <div class="row">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="swiper-slide">
                                    <a href="#">
                                        <div style="width: 230px;margin: 0 auto;">
                                            <img src="../img/rotation_map2/11西湖龙井_绿茶.jpg" alt="">
                                            <h5>明杭 2021年雨前西湖龙井 绿茶 250g牛皮纸包</h5>
                                            <span>雨前茶 口感浓醇甘甜</span>
                                            <div style="display:flex;justify-content: left;margin-top: 10px;">
                                                <img src="../img/rotation_map2/限时特价.png" alt=""
                                                    style="width:48px;height:21px">
                                                <span style="color: #c00000;font-size: 16px;">￥349.00
                                                    <s>￥1100.00</s>
                                                </span>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                            </div>


                            <!-- 如果需要导航按钮 -->
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>


                        </div>
                    </div>
                </div>
                <script language="javascript">
                    var mySwiper = new Swiper('.swiper', {
                        slidesPerView: 2,

                        loop: true, // 循环模式选项



                        // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },



                        // effect: 'coverflow',
                        // slidesPerView: 3,
                        // centeredSlides: true,



                        autoplay: {
                            delay: 1000,//1秒切换一次
                            pauseOnMouseEnter: true,
                            disableOnInteraction: false,
                        },

                    })
                </script>

            </div>

            <!-- 自饮 -->
            <div class="container">
                <div class="row" id="drink">
                    <div style="color: black;font-size: 22px;margin: 30px;">自饮</div>
                    <!-- 自饮左侧 -->
                    <div class="col col-xl-2 col-lg-3 d-none d-xl-block">
                        <a href="#" class="left-drink">
                            <div class="left-drinkbox">
                                <img src="../img/drink/自饮侧边1.jpg" alt="" style="width: 100%;height: 100%;">
                            </div>
                            <div class="left-drink-downbox" style="background-color: #e0e0e0;">
                                <a href="#" style="display:flex;justify-content:space-between;align-items: center;">
                                    <div style="margin-left: 5px; margin-top: 30px;">
                                        <h2>自饮助手</h2>
                                        <p>自己喝的茶</p>
                                        <p>包装不用太复杂</p>
                                    </div>
                                    <div>
                                        <img src="../img/drink/more.png" alt=""
                                            style="width: 50px;height: 50px;margin-right: 5px;">
                                    </div>
                                </a>
                            </div>
                        </a>
                    </div>

                    <!-- 自饮center -->
                    <div class="col col-xl-8 col-lg-6 col-md-12 " id="drink-center">
                        <div class="row">
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/01.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/02.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/03.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/04.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/05.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/06.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- 自饮右侧 -->
                    <div class="col col-xl-2 col-lg-3 d-none d-xl-block">
                        <a href="#" class="left-drink">
                            <div class="left-drinkbox">
                                <div style="width: 100%;height: 100%;">
                                    <a href="#" style="text-decoration: none;">
                                        <div>
                                            <div
                                                style="height: 40px; display: flex;justify-content: center;align-items: center; color: black;">
                                                <h5>自饮锦囊</h5>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                                            color: black;
                                            overflow: hidden;
                                             width: 100%;
                                            text-overflow: ellipsis;
                                            white-space: nowrap;">
                                                茶水表面有层膜，是茶脏了还是茶杯脏了？</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/01_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        在贾科明的茶杯里，她有时能看到泛着光泽的茶膜，有时则看不到。而且，如果等一段时间再去喝泡好的茶，会发现茶膜像冰层一样裂开。</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">绿茶、红茶、乌龙茶、黑茶，什么时候买最合适？</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/02_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        绿茶、红茶、乌龙茶、黑茶，什么时候买最合适？你可能并不知道茶叶是什么季节做出来的
                                                        为什么明前、雨前价高一等,所有茶都是明前、雨前最好么？</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">白茶与绿茶究竟有多大区别？</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/03_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        想必很多人都有个错误认知，便是以为“安吉白茶”是白茶。其实，安吉白茶是属于绿茶。明明是绿茶，却叫着白茶的姓名，这一定是成心的。那么，如何分辨出白茶、绿茶呢？这白茶与绿茶的差异到底有多大？唐唐这就来说说。</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">白茶属于什么茶？ 白茶的功效与作用及禁忌</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/04_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        有一种茶，是返璞归真的年月味道!</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                            </div>
                            <!-- drink右侧 下边盒子 -->
                            <div class="left-drink-downbox" style="background-color: #e0e0e0;">
                                <a href="#" style="display:flex;justify-content:space-between;align-items: center;">
                                    <div style="margin-left: 5px; margin-top: 30px;">
                                        <h2>浏览更多</h2>
                                        <p>想要喝茶，不知如何选</p>
                                        <p>这里有一只锦囊！</p>
                                    </div>
                                    <div>
                                        <img src="../img/drink/more.png" alt=""
                                            style="width: 50px;height: 50px;margin-right: 5px;">
                                    </div>
                                </a>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 送礼 -->
            <div class="container">
                <div class="row" id="gift">
                    <div style="color: black;font-size: 22px;margin: 30px;">送礼</div>
                    <!-- 自饮左侧 -->
                    <div class="col col-xl-2 col-lg-3 d-none d-xl-block">
                        <a href="#" class="left-drink">
                            <div class="left-drinkbox">
                                <img src="../img/drink/自饮侧边1.jpg" alt="" style="width: 100%;height: 100%;">
                            </div>
                            <div class="left-drink-downbox" style="background-color: #e0e0e0;">
                                <a href="#" style="display:flex;justify-content:space-between;align-items: center;">
                                    <div style="margin-left: 5px; margin-top: 30px;">
                                        <h2>自饮助手</h2>
                                        <p>自己喝的茶</p>
                                        <p>包装不用太复杂</p>
                                    </div>
                                    <div>
                                        <img src="../img/drink/more.png" alt=""
                                            style="width: 50px;height: 50px;margin-right: 5px;">
                                    </div>
                                </a>
                            </div>
                        </a>
                    </div>

                    <!-- 自饮center -->
                    <div class="col col-xl-8 col-lg-6 col-md-12 " id="drink-center">
                        <div class="row">
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/01.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/02.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/03.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/04.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/05.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/06.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- 自饮右侧 -->
                    <div class="col col-xl-2 col-lg-3 d-none d-xl-block">
                        <a href="#" class="left-drink">
                            <div class="left-drinkbox">
                                <div style="width: 100%;height: 100%;">
                                    <a href="#" style="text-decoration: none;">
                                        <div>
                                            <div
                                                style="height: 40px; display: flex;justify-content: center;align-items: center; color: black;">
                                                <h5>自饮锦囊</h5>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">茶水表面有层膜，是茶脏了还是茶杯脏了？</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/01_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        在贾科明的茶杯里，她有时能看到泛着光泽的茶膜，有时则看不到。而且，如果等一段时间再去喝泡好的茶，会发现茶膜像冰层一样裂开。</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">绿茶、红茶、乌龙茶、黑茶，什么时候买最合适？</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/02_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        绿茶、红茶、乌龙茶、黑茶，什么时候买最合适？你可能并不知道茶叶是什么季节做出来的
                                                        为什么明前、雨前价高一等,所有茶都是明前、雨前最好么？</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">白茶与绿茶究竟有多大区别？</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/03_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        想必很多人都有个错误认知，便是以为“安吉白茶”是白茶。其实，安吉白茶是属于绿茶。明明是绿茶，却叫着白茶的姓名，这一定是成心的。那么，如何分辨出白茶、绿茶呢？这白茶与绿茶的差异到底有多大？唐唐这就来说说。</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div style="margin: 5px 5px ;width: 180px;height: 100px;">
                                            <h6 style="
                      color: black;
                      overflow: hidden;
                      width: 100%;
                      text-overflow: ellipsis;
                      white-space: nowrap;">白茶属于什么茶？ 白茶的功效与作用及禁忌</h6>
                                            <div style="display: flex;justify-content: space-between;">
                                                <img src="../img/drink/04_right.png" alt=""
                                                    style="width: 50px;height: 50px;">
                                                <div class="drink-right-text" style="height: 50px;">
                                                    <span style="
                        color: #b0b0b0;
                        font-size:12px;line-height: 15px">
                                                        有一种茶，是返璞归真的年月味道!</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                            </div>
                            <!-- drink右侧 下边盒子 -->
                            <div class="left-drink-downbox" style="background-color: #e0e0e0;">
                                <a href="#" style="display:flex;justify-content:space-between;align-items: center;">
                                    <div style="margin-left: 5px; margin-top: 30px;">
                                        <h2>浏览更多</h2>
                                        <p>想要喝茶，不知如何选</p>
                                        <p>这里有一只锦囊！</p>
                                    </div>
                                    <div>
                                        <img src="../img/drink/more.png" alt=""
                                            style="width: 50px;height: 50px;margin-right: 5px;">
                                    </div>
                                </a>
                            </div>
                        </a>
                    </div>
                </div>
            </div>


            <!-- 茶具 -->
            <div class="container">
                <div class="row" id="tea">
                    <div style="color: black;font-size: 22px;margin: 30px;">茶具</div>
                    <!-- 左侧 -->
                    <div class="col col-xl-2 col-lg-3 d-none d-xl-block">
                        <a href="#" class="left-drink">
                            <div class="left-drinkbox">
                                <img src="../img/tea/侧边茶器1.jpg" alt="" style="width: 100%;height: 100%;">
                            </div>
                            <div class="left-drink-downbox" style="background-color: #e0e0e0;">
                                <a href="#" style="display:flex;justify-content:space-between;align-items: center;">
                                    <div style="margin-left: 5px; margin-top: 30px;">
                                        <h2>自饮助手</h2>
                                        <p>自己喝的茶</p>
                                        <p>包装不用太复杂</p>
                                    </div>
                                    <div>
                                        <img src="../img/drink/more.png" alt=""
                                            style="width: 50px;height: 50px;margin-right: 5px;">
                                    </div>
                                </a>
                            </div>
                        </a>
                    </div>

                    <!-- 自饮center -->
                    <div class="col col-xl-8 col-lg-6 col-md-12 " id="drink-center">
                        <div class="row">
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/01.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/02.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/03.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/04.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/05.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                            <div class="col col-xl-4">
                                <a href="#">
                                    <div>
                                        <img src="../img/drink/06.jpg" alt="">
                                    </div>
                                    <span>醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                    <p>经典口味 口粮茶必备</p>
                                    <h5>￥150</h5>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col col-xl-2 col-lg-3 d-none d-xl-block">
                        <a href="#" class="left-drink">
                            <div class="left-drinkbox">
                                <img src="../img/tea/侧边茶器1.jpg" alt="" style="width: 100%;height: 100%;">
                            </div>
                            <div class="left-drink-downbox" style="background-color: #e0e0e0;">
                                <a href="#" style="display:flex;justify-content:space-between;align-items: center;">
                                    <div style="margin-left: 5px; margin-top: 30px;">
                                        <h2>自饮助手</h2>
                                        <p>自己喝的茶</p>
                                        <p>包装不用太复杂</p>
                                    </div>
                                    <div>
                                        <img src="../img/drink/more.png" alt=""
                                            style="width: 50px;height: 50px;margin-right: 5px;">
                                    </div>
                                </a>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <!-- 热评产品 -->
            <div class="container">
                <div class="row" id="hot">
                    <div class="col col-xl-12 col-lg-12 col-md-12 d-none d-md-block ">
                        <div style="color: black;font-size: 22px;margin: 30px;">热评</div>
                    </div>
                    <!-- 轮播图主体 -->
                    <div class="col col-xl-12 col-lg-12 col-md-12 d-none d-md-block " id="drink-center">
                        <div class="row">
                            <div class="swiper" id="swiper2">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div style="display: flex;justify-content: center;">
                                            <a href="#">
                                                <div>
                                                    <img src="../img/drink/01.jpg" alt="">
                                                </div>
                                                <span style=" width: 220px;
                                            color: #333333;
                                            display: -webkit-box;
                                            /* 弹性盒子元素垂直排列 */
                                            -webkit-box-orient: vertical;
                                            /* 控制要显示的行数 */
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;">醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                                <p>经典口味 口粮茶必备</p>
                                                <h5 style="color: red;">￥150</h5>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div style="display: flex;justify-content: center;">
                                            <a href="#">
                                                <div>
                                                    <img src="../img/drink/01.jpg" alt="">
                                                </div>
                                                <span style=" width: 220px;
                                            color: #333333;
                                            display: -webkit-box;
                                            /* 弹性盒子元素垂直排列 */
                                            -webkit-box-orient: vertical;
                                            /* 控制要显示的行数 */
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;">醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                                <p>经典口味 口粮茶必备</p>
                                                <h5 style="color: red;">￥150</h5>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <div style="display: flex;justify-content: center;">
                                            <a href="#">
                                                <div>
                                                    <img src="../img/drink/01.jpg" alt="">
                                                </div>
                                                <span style=" width: 220px;
                                            color: #333333;
                                            display: -webkit-box;
                                            /* 弹性盒子元素垂直排列 */
                                            -webkit-box-orient: vertical;
                                            /* 控制要显示的行数 */
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;">醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                                <p>经典口味 口粮茶必备</p>
                                                <h5 style="color: red;">￥150</h5>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <div style="display: flex;justify-content: center;">
                                            <a href="#">
                                                <div>
                                                    <img src="../img/drink/01.jpg" alt="">
                                                </div>
                                                <span style=" width: 220px;
                                            color: #333333;
                                            display: -webkit-box;
                                            /* 弹性盒子元素垂直排列 */
                                            -webkit-box-orient: vertical;
                                            /* 控制要显示的行数 */
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;">醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                                <p>经典口味 口粮茶必备</p>
                                                <h5 style="color: red;">￥150</h5>
                                            </a>
                                        </div>
                                    </div>

                                    <div class="swiper-slide">
                                        <div style="display: flex;justify-content: center;">
                                            <a href="#">
                                                <div>
                                                    <img src="../img/drink/01.jpg" alt="">
                                                </div>
                                                <span style=" width: 220px;
                                            color: #333333;
                                            display: -webkit-box;
                                            /* 弹性盒子元素垂直排列 */
                                            -webkit-box-orient: vertical;
                                            /* 控制要显示的行数 */
                                            -webkit-line-clamp: 1;
                                            overflow: hidden;">醉品朴茶 简雅系列 2020年 大红袍 250g 自饮招待茶</span>
                                                <p>经典口味 口粮茶必备</p>
                                                <h5 style="color: red;">￥150</h5>
                                            </a>
                                        </div>
                                    </div>

                                </div>
                                <!-- 如果需要导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <script>
                var mySwiper2 = new Swiper('#swiper2', {
                    slidesPerView: 4,
                    loop: true, // 循环模式选项
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    // effect: 'coverflow',
                    // slidesPerView: 3,
                    // centeredSlides: true,
                    autoplay: {
                        delay: 2000,//1秒切换一次
                        pauseOnMouseEnter: true,
                        disableOnInteraction: false,
                    },


                })

            </script>
        </div>

    </div>

    <!-- 页面下部 -->
    <div class="container">
        <!-- 第一行 -->
        <div class="row">
            <div class="col col-xl-2 col-md-2 d-none d-xl-block">
                <div style="display:flex;justify-content:space-between;align-items: center; width: 100%; margin: 20px;">
                    <img src="../img/img-small/01.png" alt="" style="width: 32px;height: 32px;">
                    <span>原产地直供</span>
                    <div class="d-flex" style="height: 40px;">
                        <div class="vr"></div>
                    </div>
                </div>
            </div>
            <div class="col col-xl-2 col-md-2 d-none d-xl-block">
                <div style="display:flex;justify-content:space-between;align-items: center; width: 100%; margin: 20px;">
                    <img src="../img/img-small/02.png" alt="" style="width: 32px;height: 32px;">
                    <span>1000家合作社联盟</span>
                    <div class="d-flex" style="height: 40px;">
                        <div class="vr"></div>
                    </div>
                </div>
            </div>
            <div class="col col-xl-2 col-md-2 d-none d-xl-block">
                <div style="display:flex;justify-content:space-between;align-items: center; width: 100%; margin: 20px;">
                    <img src="../img/img-small/03_10w.png" alt="" style="width: 32px;height: 32px;">
                    <span>10万亩茶园直供</span>
                    <div class="d-flex" style="height: 40px;">
                        <div class="vr"></div>
                    </div>
                </div>
            </div>
            <div class="col col-xl-2 col-md-2 d-none d-xl-block">
                <div style="display:flex;justify-content:space-between;align-items: center; width: 100%; margin: 20px;">
                    <img src="../img/img-small/04_90day.png" alt="" style="width: 32px;height: 32px;">
                    <span>90天商品保价</span>
                    <div class="d-flex" style="height: 40px;">
                        <div class="vr"></div>
                    </div>
                </div>
            </div>
            <div class="col col-xl-2 col-md-2 d-none d-xl-block">
                <div style="display:flex;justify-content:space-between;align-items: center; width: 100%; margin: 20px;">
                    <img src="../img/img-small/05.png" alt="" style="width: 32px;height: 32px;">
                    <span>30天商品退换货</span>
                    <div class="d-flex" style="height: 40px;">
                        <div class="vr"></div>
                    </div>
                </div>
            </div>
            <div class="col col-xl-2 col-md-2 d-none d-xl-block">
                <div style="display:flex;justify-content:space-between;align-items: center; width: 100%; margin: 20px;">
                    <img src="../img/img-small/06.png" alt="" style="width: 32px;height: 32px;">
                    <span>满59元免运费</span>
                    <div class="d-flex" style="height: 40px;">
                        <div class="vr"></div>
                    </div>
                </div>
            </div>

        </div>
        <hr>
        <!-- 第二行 -->
        <div class="row">
            <div class="col col-xl-7 col-md-12 d-none d-md-block">
                <div class="row">
                    <div class="col col-xl-2">
                        <div class="down-text-box">
                            <ul>
                                <li style="margin-bottom: 20px;">购物指南</li>
                                <li>
                                    <a href="#">购物保障</a>
                                </li>
                                <li>
                                    <a href="#">积分政策</a>
                                </li>
                                <li>
                                    <a href="#">企业用户</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col col-xl-2">
                        <div class="down-text-box">
                            <ul>
                                <li style="margin-bottom: 20px;">配送方式</li>
                                <li>
                                    <a href="#">快递资费</a>
                                </li>
                                <li>
                                    <a href="#">配送时间</a>
                                </li>
                                <li>
                                    <a href="#">配送范围</a>
                                </li>
                                <li>
                                    <a href="#">验货签收</a>
                                </li>
                        </div>
                    </div>

                    <div class="col col-xl-2">
                        <div class="down-text-box">
                            <ul>
                                <li style="margin-bottom: 20px;">支付方式</li>
                                <li>
                                    <a href="#">货到付款</a>
                                </li>
                                <li>
                                    <a href="#">在线支付</a>
                                </li>
                                <li>
                                    <a href="#">网银在线</a>
                                </li>
                                <li>
                                    <a href="#">银行转账</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col col-xl-2">
                        <div class="down-text-box">
                            <ul>
                                <li style="margin-bottom: 20px;">售后服务</li>
                                <li>
                                    <a href="#">退换货原则</a>
                                </li>

                                <li>
                                    <a href="#">退换货要求</a>
                                </li>
                                <li>
                                    <a href="#">运费规则</a>
                                </li>
                                <li>
                                    <a href="#">退换货流程</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col col-xl-2 ">
                        <div class="down-text-box">
                            <ul>
                                <li style="margin-bottom: 20px;">关于醉品</li>
                                <li>
                                    <a href="#">关于我们</a>
                                </li>
                                <li>
                                    <a href="#">醉品动态</a>
                                </li>
                                <li>
                                    <a href="#">媒体声音</a>
                                </li>
                                <li>
                                    <a href="#">品牌集成</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col col-xl-2">
                        <div class="down-text-box" style="display: flex;justify-content: center;align-items: center;">
                            <div class="d-flex" style="height: 160px; margin-top: 15px;">
                                <div class="vr"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col col-xl-5 col-md-12 d-none d-md-block">
                <div class="down-img-box">
                    <div class="row">
                        <div class="col col-xl-4">
                            <span style="font-size: 18px;color: #c00000;margin-top: 50px;">4006-066-068</span>
                            <span style="font-size: 14px;">周一至周五 08:40-18:00</span>
                        </div>
                        <div class="col col-xl-4">
                            <img src="../img/img-small/20200422wxkf.jpg" alt="" />
                            <span>扫码添加客服微信</span>
                        </div>
                        <div class="col col-xl-4">
                            <img src="../img/img-small/phone_qr.png" alt="" />
                            <span>醉品茶城手机版</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部栏 -->
    <div class="container-fuild" style="padding: 30px;background-color: #333333;">
        <div class="container">
            <div class="row">
                <div class="col col-xl-6 col-lg-6 d-none d-lg-block">
                    <div class="row">
                        <div class="col col-xl-8">
                            <div class="box" style="float: left;">
                                <img src="../img/zui.png" alt="" />
                            </div>
                            <div>
                                <div style="margin-top: 5px; overflow: hidden;">
                                    <ul>
                                        <li style="list-style: none;
                  font-size: 12px;
                  float: left;">
                                            <a href="" style=" color: #b0b0b0;
                    text-decoration: none;
                    font-size: 12px;">关于我们</a>
                                            <b style="color: #666; margin: 0 10px;">|</b>
                                        </li>
                                        <li style="list-style: none;
                  font-size: 12px;
                  float: left;">
                                            <a href="" style=" color: #b0b0b0;
                    text-decoration: none;
                    font-size: 12px;">版权声明</a>
                                            <b style="color: #666;margin: 0 10px;">|</b>
                                        </li>
                                        <li style="list-style: none;
                  font-size: 12px;
                  float: left;">
                                            <a href="" style=" color: #b0b0b0;
                    text-decoration: none;
                    font-size: 12px;">联系我们</a>

                                        </li>
                                    </ul>
                                </div>
                                <div>
                                    <span style="color: #b0b0b0;font-size: 12px;">© 2010 - 2022 醉品茶城
                                        厦门品茶集网络科技有限公司</span>
                                </div>
                                <div style="display: flex; justify-content: space-between">
                                    <span style="color: #b0b0b0;
                font-size: 12px;">zuipin.cn All Rights Reserved</span>
                                    <a href="" style=" color: #b0b0b0;
                text-decoration: none;
                font-size: 12px;">闽ICP备10200063号-1</a>
                                </div>
                            </div>

                        </div>
                        <div class="col col-xl-4">
                            <img src="../img/pincha.png" alt="" style="margin-top: 15px;">
                        </div>
                    </div>
                </div>
                <div class="col col-xl-6 col-lg-6 d-none d-lg-block">
                    <div class="row">
                        <div class="col col-xl-3">
                            <div style="display:flex;justify-content: space-between;align-items: center;">
                                <img src="../img/两岸茶.png" alt="" style="width: 30px;height: 30px;" />
                                <a href="#"
                                    style="color: #b0b0b0;font-size: 14px;text-decoration: none;">海峡两岸茶业交流协会互联网分会</a>
                            </div>
                        </div>
                        <div class="col col-xl-3">
                            <div style="display:flex;justify-content: space-between;align-items: center;">
                                <img src="../img/315.jpg" alt="" style="width: 30px;height: 30px;" />
                                <a href="#"
                                    style="color: #b0b0b0;font-size: 14px;text-decoration: none;">315安全服务保障认证</a>
                            </div>
                        </div>
                        <div class="col col-xl-3">
                            <div style="display:flex;justify-content: space-between;align-items: center;">
                                <img src="../img/可信.png" alt="" style="width: 30px;height: 30px;" />
                                <a href="#" style="color: #b0b0b0;font-size: 14px;text-decoration: none;">可信网站示范企业</a>
                            </div>
                        </div>
                        <div class="col col-xl-3">
                            <div style="display:flex;justify-content: space-between;align-items: center;">
                                <img src="../img/logo工商执照.png" alt="" style="width: 30px;height: 30px;" />
                                <a href="#" style="color: #b0b0b0;font-size: 14px;text-decoration: none;">工商执照经营允许</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script src="../vendor/jquery-3.6.0.js"></script>
    <script>
        $('#monitor>a').mouseenter(function () {
            $(this).addClass('active').siblings().removeClass('active')
            console.log(this.innerHTML)
            console.log(this)

        })
        onscroll = function () {
            // console.log("onscroll");
            //滚动的距离
            const y = document.documentElement.scrollTop || document.body.scrollTop;
            console.log("y:", y);

            if (y > 750 && y < 3550) {
                $('#monitor').fadeIn('slow')
            } else {
                $('#monitor').fadeOut('slow')
            }

            topmonitor.style.display = y > 750 ? '' : 'none'
        };

    </script>

</body>

</html>